/* Copyright (c) 2025, Huawei Technologies.
 * All rights reserved.
 *
 * Licensed under the Apache License, Version 2.0  (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import { PolymerElement, html } from '@polymer/polymer';
import { customElement } from '@polymer/decorators';
@customElement('scene-legend')
class Legend extends PolymerElement {
  static get template(): HTMLTemplateElement {
    return html`
      <style>
        .legend {
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: 10px;
          background: #fff;
          height: 40px;
        }
        .legend-item {
          margin-right: 10px;
          display: flex;
          align-items: center;
        }
        .legend-item-value {
          margin-left: 5px;
          font-size: 12px;
        }
        .legend-clarifier {
          color: #266236;
          cursor: pointer;
          height: 16px;
          width: 16px;
          margin-left: 4px;
          display: inline-block;
          text-decoration: underline;
          background: url('');
        }

        .legend-clarifier paper-tooltip {
          width: 150px;
        }

        .custom-tooltip {
          font-size: 14px;
        }
      </style>
      <div class="legend">
        <div class="legend-item">
          <tf-graph-icon type="META" height="16" fill-override="#eee" stroke-override="#a6a6a6"></tf-graph-icon>
          <span class="legend-item-value">Module or Operators</span>
        </div>
        <div class="legend-item">
          <tf-graph-icon type="OP" height="16"></tf-graph-icon>
          <span class="legend-item-value">Unexpanded Module or Operators</span>
          <div class="legend-item-value legend-clarifier">
            <paper-tooltip fit-to-visible-bounds animation-delay="0" position="right" offset="0">
              <div class="custom-tooltip">
                Unexpandable Node: It can be an Api, operator or module. It cannot be expanded because it has no
                subnodes
              </div>
            </paper-tooltip>
          </div>
        </div>
        <div class="legend-item">
          <tf-graph-icon type="API_LIST" height="16"></tf-graph-icon>
          <span class="legend-item-value">Api List</span>
          <div class="legend-item-value legend-clarifier">
            <paper-tooltip animation-delay="0" position="right" offset="0">
              <div class="custom-tooltip">Apis between modules</div>
            </paper-tooltip>
          </div>
        </div>
        <div class="legend-item">
          <tf-graph-icon type="MULTI_COLLECTION" height="16"></tf-graph-icon>
          <span class="legend-item-value">Multi Collection</span>
          <div class="legend-item-value legend-clarifier">
            <paper-tooltip animation-delay="0" position="right" offset="0">
              <div class="custom-tooltip">Fusion node Collection</div>
            </paper-tooltip>
          </div>
        </div>
      </div>
    `;
  }
}
